<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/default.jpg" alt="">
        <a class="title" href="blog_list.html">博客系统</a>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="javascript:myIndex()">我的主页</a>
        <a href="myinfo.html">个人资料</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:mydraft()">我的草稿</a>
        <a href="private_letter.html">好友</a>
        <a id="login-logout" href=""></a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="" id="photo" class="avtar" alt="">
                <a href="" id="user-location" target="_blank" style="color: black;">
                    <h3 id="username">lisi</h3>
                </a>
                <div id="followDiv">
                    <!-- <a href="" id="follow">
                        <span id="#follow-msg">关注?</span>
                    </a> -->
                </div>
                <a href="#" id="gitee" target="_blank">github 地址</a>
                <div class="counter">
                    <img src="img/writeLogo.png">
                    <div>创作 <span id="artCount"></span> 篇文章</div>
                </div>
                <div class="counter">
                    <img src="img/likesLogo.png" alt="">
                    <div>获得 <span id="likesCount"></span> 次点赞</div>
                </div>
                <div class="counter">
                    <img src="img/commentLogo.png" alt="">
                    <div>内容获得 <span id="commentsCount"></span> 次评论</div>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"></h3>
                <!-- 博客时间 -->
                <div class="date">修改时间:<span id="updatetime"></span> &nbsp;&nbsp; 阅读量：<span id="rcount"></span>
                </div>
                <!-- 博客正文 -->
                <div id="editorDiv">

                </div>
            </div>

            <!-- 点赞收藏关注 -->
            <div id="tool-list">
                <!-- 点赞 -->
                <a href="javascript:clickLikes()" id="likes" style="text-decoration: none;">
                    <img src="img/unlikes.png" id="likes-img">
                    <span id="likes-count"></span>
                </a>
                <!-- 收藏 -->

            </div>

            <!-- 评论区 -->
            <h3>评论区</h3>
            <div class="blog-comment">
                <!-- 写评论 -->
                <div class="card">
                    <img id="curphoto" src="img/default.jpg" alt="">
                    <textarea id="input-comment" cols="10" rows="5" placeholder="留下你精彩的评论吧~"></textarea>
                    <button id="sub-comment" onclick="subComment()">评论</button>
                </div>
                <hr>

                <!-- 评论模板 -->
                <div id="commentDiv">
                    <div class="card">
                        <img src="img/cat.jpg" alt="">
                        <span class="reviewer"><a href="myblog_list.html">admin</a></span>
                        <span id="createtime">2023-4-12</span>
                        <p class="comment">
                            今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!今天我要努力好好敲代码!!!
                        </p>
                        <a href="javascript:delComment()" class="detail">删除评论</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        var editormd;
        function initEdit(md) {
            editormd = editormd.markdownToHTML("editorDiv", {
                markdown: md, // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
            });
        }


        //登录 / 注销
        loginOrLogout();

        //获取文章 id 
        var id = getUrlValue('id');
        if (id == "" || id <= 0) {
            alert("文章参数错误!");
        }
        //文章作者 id (获取文章信息时赋值)
        var autId = 0;
        //当前登录用户的 id (判断是否需要关注按钮，获取登录用户信息时赋值)
        var curId = 0;

        //查询文章详情
        function getArtDetail(id) {
            jQuery.ajax({
                type: 'POST',
                url: '/art/detail',
                data: { "id": id },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data.id > 0) {
                        //result.data.id > 0 这一条判断是必要的，因为有可能客户端通过 postman 发送请求，状态状态码是没问题的（状态码没问题只能表示交互没问题，但不表示里面一定会有数据）
                        jQuery("#title").html(result.data.title);
                        jQuery("#updatetime").html(result.data.updatetime);
                        jQuery("#rcount").html(result.data.rcount);
                        initEdit(result.data.content);
                        //将用户 id 作为参数，获取用户信息
                        showAuthor(result.data.uid);
                        //获取作者 id 
                        autId = result.data.uid;
                    } else {
                        alert("文章查询失败，请稍后重试!");
                    }
                }
            });
        }
        getArtDetail(id);

        //获取当前登录用户全部信息
        function getCurUserInfoAll() {
            jQuery.ajax({
                type: 'GET',
                url: '/user/info',
                data: {},
                success: function (result) {
                    if (result != null && result.code == 200 && result.data != null) {
                        //当前登录用户信息获取成功，修改评论区头像
                        jQuery("#curphoto").attr("src", result.data.photo);
                        curId = result.data.id;
                    }
                }
            });
        }
        getCurUserInfoAll();

        //获取文章作者信息
        function showAuthor(uid) {
            var followDiv = jQuery("#followDiv");
            jQuery.ajax({
                type: 'POST',
                url: '/user/show-aut',
                data: { "uid": uid },
                success: function (result) {
                    if (result != null && result.code == 200) {
                        //作者信息获取成功(这里使用 text 和 html 效果都一样)
                        jQuery("#photo").attr("src", result.data.photo);
                        jQuery("#username").text("作者:" + result.data.nickname);
                        jQuery("#user-location").attr("href", "myblog_list.html?id="+ result.data.id);
                        
                        //关注按钮
                        //检验是否为当前用户
                        if(result.data.follow != null) {
                            var followList = "";
                            followList += '<a href="javascript:clickFollow('+uid+','+result.data.follow+')" id="follow">';
                            if(result.data.follow) {
                                followList += '<span id="follow-msg">已关注</span>';
                            } else {
                                followList += '<span id="follow-msg">+关注</span>';
                            }
                            followList += '</a>';
                            followDiv.html(followList);
                        }

                        //检测是否有 gitee 地址
                        var gitee = jQuery("#gitee");
                        if(result.data.gitee == "") {
                            //不存在 gitee 地址
                            gitee.text("暂无 gitee 地址");
                        } else {
                            //存在
                            gitee.attr("href", result.data.gitee);
                            gitee.text("gitee 地址");
                        }
                        jQuery("#artCount").text(result.data.artCount);
                        jQuery("#likesCount").text(result.data.likes);
                        jQuery("#commentsCount").text(result.data.comments);
                    } else {
                        alert("作者信息获取失败!");
                    }
                }
            });
        }



        //点赞按钮
        var likesButton = jQuery("#likes-img");

        //获取当前点赞数
        function getLikesCount() {
            jQuery.ajax({
                type: "POST",
                url: "/likes/count",
                data: {
                    "aid": id
                },
                success: function (result) {
                    if (result != null && result.code == 200) {
                        //获取当前点赞数
                        jQuery("#likes-count").text(result.data);
                        if (result.msg == "yes") {
                            //修改为已点赞图片
                            likesButton.attr("src", "img/likes.png");
                        } else {
                            //修改为未点赞图片
                            likesButton.attr("src", "img/unlikes.png");
                        }
                    } else {
                        alert("点赞数据获取失败!");
                    }
                }
            });
        }
        getLikesCount();

        //点击点赞按钮
        function clickLikes() {
            if (likesButton.attr("src") == "img/unlikes.png") {
                //当前未点赞，点击后触发点赞
                jQuery.ajax({
                    type: "POST",
                    url: "/likes/select",
                    data: {
                        "aid": id,
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            getLikesCount();
                        } else {
                            alert("点赞失败，请先登录!");
                        }
                    }
                });
            } else {
                //当前已点赞，点击后触发取消点赞
                jQuery.ajax({
                    type: "POST",
                    url: "/likes/cancel",
                    data: {
                        "aid": id
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            getLikesCount();
                        } else {
                            alert("取消点赞失败");
                        }
                    }
                })
            }
        }

        //展示评论信息
        function showComment() {
            jQuery.ajax({
                type: "POST",
                url: "/comment/show",
                data: {
                    "aid": id,
                },
                success: function (result) {
                    if (result != null && result.code == 200) {
                        var CommentListDiv = "";
                        for (var i = 0; i < result.data.length; i++) {
                            var CommentInfo = result.data[i];
                            CommentListDiv += '<div class="card">';
                            CommentListDiv += '<img src="' + CommentInfo.photo + '" alt="">';
                            CommentListDiv += '<span class="reviewer"><a href="myblog_list.html?id='+CommentInfo.uid+'" target="_blank">' + CommentInfo.nickname + '：</a></span>';
                            CommentListDiv += '<span id="createtime">' + CommentInfo.createtime + '</span>'
                            CommentListDiv += '<p class="comment">';
                            CommentListDiv += CommentInfo.comment;
                            CommentListDiv += '</p>';
                            CommentListDiv += '<a href="javascript:delComment(' + CommentInfo.id + ')"class="detail">删除评论</a>';
                            CommentListDiv += '</div>';
                        }
                        //将 html 填充进去
                        jQuery("#commentDiv").html(CommentListDiv);
                    } else {
                        alert("评论信息获取失败!");
                    }
                }
            });
        }
        showComment();

        //删除评论
        function delComment(id) {
            if (confirm("确定删除该评论?")) {
                jQuery.ajax({
                    type: "POST",
                    url: "/comment/del",
                    data: {
                        "id": id,
                        "autId": autId
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            alert("评论删除成功!");
                            //刷新页面
                            location.href = location.href;
                        } else {
                            alert(result.msg);
                        }
                    }
                });
            }
        }


        //阅读量 + 1
        function updataRCount() {
            jQuery.ajax({
                type: 'POST',
                url: '/art/incr-rcount',
                data: { "id": id },
                success: function (result) { }
            });
        }
        updataRCount();

        //增加评论
        function subComment() {
            //非空校验
            var inputComment = jQuery("#input-comment");
            if (inputComment.val() == "") {
                alert("评论不能为空!");
                inputComment.focus();
                return;
            }
            jQuery.ajax({
                type: "POST",
                url: "/comment/add",
                data: {
                    "aid": id,
                    "comment": inputComment.val()
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data == 1) {
                        alert("评论成功!");
                        //刷新当前页面
                        location.href = location.href;
                    } else {
                        alert(result.msg);
                    }
                }
            });
        }

    </script>
</body>

</html>